<template>
    <el-dialog @open="open" v-model="isOpen" :title="props.openType==='add'?'添加商品属性':'修改商品属性'" @close="close" style="width: 30%">
        <el-form ref="dataForm" :rules="rules" :model="form" label-width="100px" align="center">
            <el-form-item label="属性名" prop="attrName">
                <el-input v-model="form.attrName"/>
            </el-form-item>
            <el-form-item label="属性类型" prop="attrType">
                <el-select v-model="form.attrType" placeholder="请选择">
                    <el-option label="基本属性" :value = 1 />
                    <el-option label="销售属性" :value = 0 />
                </el-select>
            </el-form-item>
            <el-form-item label="值类型" prop="valueType">
                <el-switch
                        v-model="form.valueType"
                        inline-prompt
                        :active-value="1"
                        :inactive-value="0"
                        active-text="多个值"
                        inactive-text="单个值"
                        class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #6861ff"
                />
            </el-form-item>
            <el-form-item label="属性图标" prop="icon">
                <el-input v-model="form.icon"/>
            </el-form-item>
            <el-form-item label="可选值" prop="valueSelect">
                <div style="display:flex;justify-content: flex-start;flex-wrap: wrap;">
                    <el-tag
                            v-for="tag in valueSelects"
                            :key="tag"
                            closable
                            :disable-transitions="false"
                            @close="handleClose(tag)"
                            style="margin:0 0 5px 5px"
                    >
                        {{ tag }}
                    </el-tag>
                    <el-input
                            v-if="inputVisible"
                            ref="InputRef"
                            v-model="inputValue"
                            class="w-20"
                            size="small"
                            @keyup.enter="handleInputConfirm"
                            @blur="handleInputConfirm"
                            style="margin-left: 5px"
                    />
                    <el-button v-else class="button-new-tag" style="margin-left: 5px" size="small" @click="showInput">
                        + 新增
                    </el-button>
                </div>
            </el-form-item>
            <el-form-item label="所属分类" prop="catalogId">
                <el-cascader
                        v-model="form.catalogId"
                        :options="options"
                        :props="caprops"
                        @change="handleChange"
                />
            </el-form-item>
            <el-form-item label="所属分组" prop="attrType">
                <el-select v-model="form.attrGroupId" placeholder="请选择">
                    <el-option v-for="item in attrGroups" :label="item.attrGroupName" :value=item.attrGroupId />
                </el-select>
            </el-form-item>
            <el-form-item label="可检索" prop="searchType">
                <el-switch
                        v-model="form.searchType"
                        inline-prompt
                        :active-value="1"
                        :inactive-value="0"
                        active-text="是"
                        inactive-text="否"
                        class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                />
            </el-form-item>
            <el-form-item label="快速展示" prop="showDesc">
                <el-switch
                        v-model="form.showDesc"
                        inline-prompt
                        :active-value="1"
                        :inactive-value="0"
                        active-text="是"
                        inactive-text="否"
                        class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                />
            </el-form-item>
            <el-form-item label="启用状态" prop="enable">
                <el-switch
                        v-model="form.enable"
                        inline-prompt
                        :active-value="1"
                        :inactive-value="0"
                        active-text="启用"
                        inactive-text="禁用"
                        class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                />
            </el-form-item>
            <el-form-item>
                <el-button v-show='props.openType==="add"' activity type="primary"   @click="addPmsAttr">添加</el-button>
                <el-button v-show="props.openType==='edit'" activity type="primary"  @click="updatePmsAttr">更新</el-button>
                <el-button @click="close" type="success" >取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
    import {ref,reactive,nextTick} from 'vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    const  emits = defineEmits(['close','reload'])
    let options = reactive([])
    let dataForm = ref(null)
    let props = defineProps(['openType','id'])
    let form = reactive({})
    let valueSelects = reactive([])
    let loading = ref(true)
    let isOpen = ref(false)
    const inputValue = ref('')
    const inputVisible = ref(false)
    const InputRef = ref()
    defineExpose({isOpen})
    let caprops = {
        value:"catId",
        label:"name"
    }
    let attrGroups = reactive([])
    const rules = reactive({
            attrId: [{required: true,message: '请输入属性id', trigger: 'blur'},],
            attrName: [{required: true,message: '请输入属性名', trigger: 'blur'},],
            icon: [{required: true,message: '请输入属性图标', trigger: 'blur'},],
            valueSelect: [{required: true,message: '请输入可选值列表[用逗号分隔]', trigger: 'blur'},],
            catalogId: [{required: true,message: '请输入所属分类', trigger: 'blur'},],
    })
    function open(){
        request.get("/api/category/list/tree").then(resp => {
            options.push(...resp)
        });
        valueSelects.length=0
        if(props.openType==='edit'){
            request.get(`/api/pmsAttr/getPmsAttrById/${props.id}`).then(resp => {

                for(let key in resp){
                    form[key] = resp[key]
                }
                valueSelects.push(...resp.valueSelect.split(";"))
                getAttrGroup(form.catalogId)
            })
        }else if(props.openType==="add"){
            for(let key in form){
                delete form[key]
            }
            form.valueType=1
            form.attrType=1
        }
    }

    function close(){
        emits("close")
        for(let key in form){
            delete form[key]
        }
        dataForm.value.resetFields()//重置表单校验
    }

    function addPmsAttr(){

        dataForm.value.validate((valid, fields)=> {
            if (valid) {
                form.catalogId = form.catalogId[form.catalogId.length-1]
                form.valueSelect = valueSelects.join(";")
                request.post("/api/pmsAttr/add",form).then(resp => {
                    emits("close")
                    emits("reload")
                    ElMessage({message: '添加成功！',type: 'success'})
                })
            }else{
                ElMessage({message: '缺少必填项！',type: 'error'})
            }
        })
    }
    function updatePmsAttr(){
        dataForm.value.validate((valid, fields)=> {
            if (valid) {
                form.valueSelect = valueSelects.join(";")
                request.post("/api/pmsAttr/update",form).then(resp => {
                    emits("close")
                    emits("reload")
                    ElMessage({message: '修改成功！',type: 'success'})
                })
            }else{
                ElMessage({message: '缺少必填项！',type: 'error'})
            }
        })
    }
    function handleChange(node){
        getAttrGroup(node[node.length-1])
    }
    function getAttrGroup(catalogId) {
        let query = {payload:{catalogId: catalogId}}
        request.post("/api/pmsAttrGroup/getAttrGroupsByCateId", query).then(resp => {
            attrGroups.length=0
            attrGroups.push(...resp.records)
        })
    }
    const handleClose = (tag) => {
        valueSelects.splice(valueSelects.indexOf(tag), 1)
    }
    const showInput = () => {
        inputVisible.value = true
        nextTick(() => {
            InputRef.value.input.focus()
        })
    }
    const handleInputConfirm = () => {
        if (inputValue.value) {
            valueSelects.push(inputValue.value)
            form.valueSelect = valueSelects.join(";")
        }
        inputVisible.value = false
        inputValue.value = ''
    }
</script>

<style scoped>

</style>